<template>
    <div class="container">
        <van-nav-bar
            title="招商商机"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
            :class="hidden == true? 'on':''"
        />
        <div class="search">
            <van-search show-action v-model="queryBySearch.keyword" placeholder="输入标识，如：联系电话、或项目名称">
                <template #action>
                    <div @click="onSearch">搜索</div>
                </template>
            </van-search>
        </div>
        <!-- 列表 -->
        <!-- 列表区域 -->
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="reLoadData"
            :immediate-check="false"
		    offset="5"
            >
                <div class="business">
                    <div class="business-item" v-for="item in businessList" :key="item.id">
                        <div class="hd">
                            <div class="business-name">{{item.contactName}}</div>
                            <div class="business-btn" @click="toDetail(item.id)">跟进</div>
                        </div>
                        <div class="bd">
                            <div class="business-phone">
                                <span class="text">联系电话</span>
                                <span class="message">{{item.contactTelephone}}</span>
                            </div>
                            <div class="business-role">
                                <span class="text">角色</span>
                                <span class="message">{{item.contactIdentity}}</span>
                            </div>
                            <div class="business-brand">
                                <span class="text">招商品牌</span>
                                <span class="message">{{item.brandName}}</span>
                            </div>
                            <div class="business-project">
                                <span class="text">项目名称</span>
                                <span class="message">{{item.projectName}}</span>
                            </div>
                            <div class="business-time">
                                <span class="text">交铺时间</span>
                                <span class="message">{{item.pavingTime|dateformat}}</span>
                            </div>
                            <div class="business-createtime">
                                <span class="text">创建时间</span>
                                <span class="message">{{item.createTime|dateformat}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </van-list>
        </van-pull-refresh>
    </div>
</template>
<script>
import {BUILD_FORM} from "@/api/brand/message"
import {INVITE_LIST} from "@/api/brand/invite"
export default {
    data(){
        return{
            queryBySearch: {
                keyword: "",
                pageNumber: 1,
                pageSize: 20
            },
            isLoading:false,
            loading: false,
      	    finished: false,
            //   商机数组
            businessList:[]
        }
    },
    created(){
        this.loadData()
    },
    methods:{
        async loadData(){
            const res1 = await BUILD_FORM()
            const res2 = await INVITE_LIST(this.queryBySearch,res1)
            console.log(res2)
            this.businessList = res2.records
        },
        onClickLeft(){
            this.$router.go(-1);
        },
        // 上拉加载
        reLoadData(){
            
        },
        // 下拉刷新
        onRefresh(){

        },
        toDetail(id){
            this.$router.push({path:"/invite/business/detail",query:{id}})
        }
    }
}
</script>
<style lang="less" scoped>
// 列表
.business{
    margin-top: 0.3rem;
    padding: 0 0.3rem;
}
.business-item{
    box-shadow: 0 0 5px 1px rgb(226, 226, 226);
    margin-bottom: 0.3rem;
    .hd{
        display: flex;
        justify-content: space-between;
        border: 1px solid #ddd; 
        padding: 0.3rem;
        border-bottom: none;
        .business-name{
            font-weight: 600;
            color: #000;
        }
        .business-btn{
            color: #1989fa;
        }
    }
    .bd{
        padding: 0.3rem;
        border: 1px solid #ddd;
        .text{
            font-weight: 600;
            color: rgb(153, 151, 151);
        }
        .message{
            color: #000;
        }
        div{
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.15rem;
            align-items: center;
        }
    }
}
</style>